<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>
<%@page import="com.yaodian100.mall.member.util.UserData"%>
<c-rt:set var="frontContextPath" value='<%=ServerValue.getFrontContextPath()%>'/>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.extensions.min.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.alphanumeric.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.form.js"></script>
<!-- 月历 -->
<script type="text/javascript" charset="UTF-8" src="/js/jquery.datepick.js"></script>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.datepick-zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="/css/smoothness.datepick.css"/>
<%
	UserData userData = new UserData(request,response);
%>
<script type="text/javascript">
<!--
	$().ready(function(){
		$("div.location").html("<a href='/'>首页</a> &gt; <span><a href='${frontContextPath}/applyClaim/search.do'>汇款单招领</a></span> &gt; <span>汇款认领</span>");
		$("#main").attr("class","remittance remit-form");

		$('#expectDate').datepick({minDate: null, maxDate: new Date(), showOn: 'both',numberOfMonths:2, 
	    	buttonImageOnly: true, buttonImage: '/images/calendar.gif',dateFormat:"yy-mm-dd"}); 
		
		//只能输入数字
		$("#orderId").numeric();
		$("#claimAmount").numeric({allow:"."});

		//查詢訂單
		//$("#showOrderId").click(function(){
		//	openDialog("查詢訂單",$("#showOrderDialog").load("<%=ServerValue.getFrontContextPath()%>/showMyOrder.jhtml"),800,600);			
		//});
		
		
	});

	function submitData(){
		if ( validateData() ){
			$("#uploadFileName").val($("#claimImg").val());
			$.getJSON($('#applyCliamForm').attr('action'),function(checkResult){
				if ( checkResult == false ) {
					$("#orderIdMsg").html("<span class='msg rn'>订单编号错误</span>");
					isCorrect = false;
				}
			});
			
			$('#applyCliamForm').ajaxSubmit({
	    url: $('#applyCliamForm').attr('action'),
	    dataType:  'json',
	    success: function(applyClaim){
						if ( null != applyClaim.id ){
							location.href="${frontContextPath}/member/applyClaim/saveSuccess.do?claimId=" + applyClaim.id; 
						}else{
							validateData();
						}
					}
	    });
		}
	}

	//资料验证
	function validateData(){
		var isCorrect = true;
		if ( "" == $("#orderId").val() ){
			$("#orderIdMsg").html("<span class='msg rn'>请输入订单编号</span>");
			isCorrect = false;
		}else $("#orderIdMsg").html("");

		if ( "" == $("#claimName").val()){
			$("#claimNameMsg").html("<span class='msg rn'>请输入汇款人</span>");
			isCorrect = false;
		}else $("#claimNameMsg").html("");

		if ( "" == $("#bankName").val()){
			$("#bankNameMsg").html("<span class='msg rn'>请输入汇款行</span>");
			isCorrect = false;
		}else $("#bankNameMsg").html("");

		if ( "" == $("#claimAmount").val()){
			$("#claimAmountMsg").html("<span class='msg rn'>请输入汇款金额</span>");
			isCorrect = false;
		}else $("#claimAmountMsg").html("");

		if ( "" == $("#expectDate").val()){
			$("#expectDateMsg").html("<span class='msg rn'>请输入汇款日期</span>");
			isCorrect = false;
		}else if($("#expectDate").val().length != 10 || $("#expectDate").val().charAt(4)!='-' || $("#expectDate").val().charAt(7)!='-'){
			$("#expectDateMsg").html("<span class='msg rn'>日期格式错误</span>");
			isCorrect = false;
		}else $("#expectDateMsg").html("");

		if ( "" == $("#contactPhone").val()){
			$("#contactPhoneMsg").html("<span class='msg rn'>请输入电话</span>");
			isCorrect = false;
		}else $("#contactPhoneMsg").html("");

		if ( "" == $("#contactEmail").val()){
			$("#contactEmailMsg").html("<span class='msg rn'>请输入邮箱地址</span>");
			isCorrect = false;
		}else $("#contactEmailMsg").html("");

		if ( "" == $("#contactEmail").val()){
			$("#contactEmailMsg").html("<span class='msg rn'>请输入邮箱地址</span>");
			isCorrect = false;
		}else if ( $("#contactEmail").val().match(/.+@.+\..+/)==null || $("#contactEmail").val().indexOf(' ')>=0 ){
			$("#contactEmailMsg").html("<span class='msg rn'>邮箱格式错误</span>");
			isCorrect = false;
		}else $("#contactEmailMsg").html("");	
		
		if ( "" == $("#claimImg").val()){
			$("#claimImgMsg").html("<span class='msg rn'>请上传汇款凭证</span>");
			isCorrect = false;
		//}else if ( $("#claimImg").val().toLowerCase().indexOf("jpg") == -1  $("#claimImg").val().toLowerCase().indexOf("gif") == -1 ){
//			$("#claimImgMsg").html("<span class='msg rn'>档案格式错误</span>");
//			isCorrect = false;
		}else $("#claimImgMsg").html("");		

		$.getJSON("${frontContextPath}/member/applyClaim/checkOrderId.do?orderId=" + $("#orderId").val(),function(checkResult){
			if ( checkResult == false ) {
				$("#orderIdMsg").html("<span class='msg rn'>订单编号错误</span>");
				isCorrect = false;
			}
		});
		return isCorrect;
	}
//-->
</script>
<div class="content">
   <h2>汇款认领</h2>
   <!-- 確認訊息 -->
   <h3>欲认领的汇款 <span>请确认以下信息为您的汇款。</span></h3>
     <div class="d-show" style="margin-left:70px;">
       <ul>
         <li class="w-1of1"><strong>汇 款 人：</strong>${bankTransfer.sourceAccountName}</li>
         <li class="w-1of3"><strong>汇款方式：</strong>${sourceRemitMenu.options[bankTransfer.sourceRemit].name}</li>
         <li class="w-1of3"><strong>到款日期：</strong><fmt:formatDate value="${bankTransfer.billDate}" pattern="yyyy-MM-dd"/></li>
         <li class="w-1of3"><strong>备注：</strong>${bankTransfer.bankMemo}</li>
       </ul>
     </div>
   <!-- 確認訊息 -->
   <!-- 表單 -->
   <h3>您的个人信息 <span>均为必填，请您如实填写，以便于我们与您核实汇款。</span></h3>
   <div class="d-show">
   	 <s:form action="applyClaim/save.do" id="applyCliamForm" name="applyCliamForm" method="post" enctype="multipart/form-data">
     <ul>
       <li class="w-1of1"><strong style="padding-left:5.4em">帐户名：</strong><%=userData.getLoginId()%></li>

       <li class="w-1of1">
       	<div><strong style="padding-left:4.3em">订单编号：</strong></div>
       	<div>
       		<input type="text" id="orderId" name="orderId" value="${orderId}" maxlength="13"/> 
       		<a href="${frontContextPath}/member/myOrder/showOrders.do?t=T&p=1" id="showOrderId" target="_blank">查詢我的订单</a> <span class="txt-gy">(提供订单编号，可加速认领作业)</span><br/>
       		<span id="orderIdMsg"></span>
       	</div>
       </li>
       <li class="w-1of1">
       	<div><strong style="padding-left:3.2em">汇款人全称：</strong></div>
       	<div>
       		<input type="text" id="claimName" name="claimName" value="${claimName}" maxlength="20"/><span class="txt-gy">(需与汇款单上的姓名一致)</span><br />
       		<span id="claimNameMsg"></span>
       	</div>
       </li>
       <li class="w-1of1">
       	<div><strong style="padding-left:3.2em">汇款行名称：</strong></div>
       	<div>
       		<input type="text" id="bankName" name="bankName" value="${bankName}" maxlength="20"/><br />
       		<span id="bankNameMsg"></span>
       	</div>
       </li>
       <li class="w-1of1">
       	<div><strong style="padding-left:4.3em">汇款金额：</strong></div>
       	<div>
       		<input type="text" id="claimAmount" name="claimAmount" value="${claimAmount}"/><span class="txt-gy">(輸入您银行电汇凭证中的汇款金額)</span><br />
       		<span id="claimAmountMsg"></span>
       	</div>
       </li>

       <li class="w-1of1">
       	<div><strong style="padding-left:4.3em">汇款时间：</strong></div>
       	<div>
       		<input type="text" readonly="readonly" id="expectDate" name="expectDate" value="${expectDate}"/><br />
       		<span id="expectDateMsg"></span>
       	</div>
       </li>
       <li class="w-1of1">
       	<div><strong style="padding-left:4.3em">处理方式：</strong></div>
       	<div>将款项存入账户余额<input type="hidden" name="claimType" value="2"/></div>
      	</li>
       <li class="w-1of1">
       	<div><strong style="padding-left:2em">您的联络方式：</strong></div>
       	<div>
       		<p><div>电话
       			<input type="text" id="contactPhone" name="contactPhone" value="${contactPhone}" maxlength="20" size="11" style="margin-right:20px;" /><br/>
       			<span id="contactPhoneMsg"></span></div>
       		<div>邮箱地址
       			<input type="text" id="contactEmail" name="contactEmail" value="${contactEmail}" maxlength="100" size="64" /><br/>
       			<span id="contactEmailMsg"></span>
       			</div>
       		</p>
       		<p class="remit-conect-note">(请填写您的有效联系方式，便于我们与您进一步确认)</p>
       </div>
       </li>
       <li class="w-1of1">
       	<div><strong>上传您的汇款凭证：</strong></div>
       	<div>
       		<s:file id="claimImg" name="claimImg" size="30" />
       		<input type="hidden" name="uploadFileName" id="uploadFileName"/>
       		<input type="hidden" name="bktId" value="${bktId}"/>
       		<span class="txt-gy">(请将电汇凭证转成电子档，上传给我们。上传格式仅支援jpg, gif，档案大小限制为2MB)</span><br />
       		<span id="claimImgMsg"></span>
       	</div>
       </li>
     </ul>
     </s:form>
  </div>
  <p align="center"><a href="javascript:;" onclick="submitData();return false;" class="btn-mid">确认提交</a></p>
  <!-- 表單 -->
</div>
<div id="dialog"></div>
<div id="showOrderDialog"></div>